<template>
  <el-dialog
    title="流程启动"
    :visible.sync="show"
    width="1000px"
    center
  >
    <el-row>
      <el-col :span="8">
        <el-tag type="success">
          <span>启动流程名称:</span><span>{{ addWorkflowObj && addWorkflowObj.name }}</span>
        </el-tag>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;margin-bottom:20px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>请确定提交的环节审批人</span>
        </div>
        <el-table
          :data="tableData_sp"
        >
          <el-table-column
            prop="addWorkflowId"
            label="活动Id"
            width="180"
          />
          <el-table-column
            prop="name"
            label="活动名称"
            width="180"
          />
          <el-table-column
            prop="organizationName"
            label="机构名称"
          />
          <el-table-column
            prop="userName"
            label="审批人"
          />
        </el-table>
      </el-card>
    </el-row>
    <div class="content-box">
      <div class="left-tree">
        <el-table
          ref="tabletreepeople"
          :data="treeData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          highlight-current-row
          default-expand-all
          :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
          @current-change="handleOrganizationClick"
        >
          <el-table-column
            prop="name"
            label="组织机构"
          />
        </el-table>
      </div>
      <div class="right-content">
        <div class="top-table-content">
          <com-table
            ref="tableUser"
            highlight-current-row
            :data="tableData"
            :columns="tableColumn"
            :total="total"
            :defaultrow="-1"
            @pageChange="pageChange"
            @change="handleUserClick"
          >
            <template v-slot:sex="{row: {sex}}">
              {{ sex ? '男' : '女' }}
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <el-row slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:showModal', false)">取 消</el-button>
      <el-button type="primary" @click="goStart">确 定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// import uploader from '@/components/Uploader'
import {
  getAddWorkflowDetail,
  startWorkflow
} from '@/api/flow'
import {
  getOrganizationTree,
  getUserList
} from '@/api/manage'
export default {
  name: 'Start',
  // components: {
  //   uploader
  // },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    currentrow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      optType: 'detail',
      organizationId: null, // 审批人的机构Id
      userId: null, // 审批人的用户Id
      addWorkflowObj: {},
      tableData_sp: [],
      tableData_fj: [],
      fileList: [],
      firstDefineWorkflow: null, // 判断是否需要展示选择审批人的标识
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      treeData: [], // 树列表
      tableData: [], // 表格列表
      selectRow: null, // 选中的数据
      directCurrentNode: null, // 选中的目录
      addObjname: null,
      tableColumn: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '账号',
          prop: 'account'
        },
        {
          label: '工号',
          prop: 'number'
        },
        {
          label: '性别',
          prop: 'sex',
          slot: 'sex'
        }
      ],
      userList: [],
      selectUser: ''
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
        this.fileList = []
      }
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        if (newData && this.currentrow.menu) {
          this.getDetail(this.currentrow.menu)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    pageChange(data) {
      this.pageParams = data
      this.getTableList(this.directCurrentNode)
    },
    // 获取树结构目录
    initTree() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
        if (nodes && nodes.length > 0) {
          this.setOrganizationRow(this.treeData)
        }
      })
    },
    setOrganizationRow(allOrganization) {
      allOrganization.forEach(item => {
        if (item.nodes.length > 0) {
          this.setOrganizationRow(item.nodes)
        }
        if (item.id === this.organizationId) {
          this.$nextTick(() => {
            this.$refs.tabletreepeople.setCurrentRow(item)
          })
          this.directCurrentNode = item
          this.getTableList(item)

          return
        }
      })
    },
    setUserRow(allUser) {
      if (!this.userId) {
        return
      }
      allUser.forEach(item => {
        if (item.id === this.userId) {
          this.$nextTick(() => {
            this.$refs.tableUser.$refs.table.setCurrentRow(item)
          })
          this.selectRow = item

          return
        }
      })
    },
    // 目录相关
    handleOrganizationClick(val) {
      if (this.organizationId) {
        this.setOrganizationRow(this.treeData)

        return
      }
      // 拿到机构信息
      this.directCurrentNode = val
      this.getTableList(val)
    },
    // 拿到具体的人员信息
    handleUserClick(val) {
      if (this.userId) {
        this.setUserRow(this.tableData)

        return
      }
      // if (val.organizationId === this.selectRow.organizationId && val.id === this.selectRow.id) {
      //   this.defaultrow = -1
      //   return
      // }
      this.selectRow = val
    },
    // 获取材料表格数据
    getTableList(data) {
      const { id } = data
      if (id) {
        const params = {
          ...this.pageParams,
          organizationId: id
        }
        getUserList(params).then(res => {
          const { data, total } = res.data || {}
          if (data) {
            this.tableData = res.data.data
            this.total = total - 0
            this.setUserRow(this.tableData)
          }
        })
      }
    },
    // 新增，修改，删除 提示文案
    showTipsFn(res, type, successFn) {
      const { code, msg } = res
      if (code === '0001') {
        this.$message({
          type: 'success',
          message: `${type}成功!`
        })
        if (successFn) {
          successFn()
        }
      } else {
        this.$message({
          type: 'error',
          message: msg || `${type}失败!`
        })
      }
    },
    // 启动流程
    goStart() {
      const selectOrganization = this.directCurrentNode

      if (!selectOrganization) {
        return this.$message.error('请选择机构！')
      }

      const selectUser = this.selectRow

      if (!selectUser) {
        return this.$message.error('请选择用户！')
      }

      const { id, menu } = this.currentrow
      const userId = selectUser.id
      const userName = selectUser.name
      const organizationId = selectOrganization.id
      const organizationName = selectOrganization.name

      const params = {
        userId: userId,
        userName: userName,
        organizationId: organizationId,
        organizationName: organizationName,
        businessId: id,
        menu: menu
      }
      startWorkflow(params).then(res => {
        this.showTipsFn(res, '启动流程', () => {
          this.$emit('update:showModal', false)
          this.$emit('freshList')
        })
      })
    },
    getDetail(menu) {
      getAddWorkflowDetail({ menu: menu }).then(res => {
        if (res.code === '0001' && res.data) {
          if (res.data.firstDefineWorkflow) {
            this.firstDefineWorkflow = res.data.firstDefineWorkflow
            this.userId = this.firstDefineWorkflow.userId
            this.organizationId = this.firstDefineWorkflow.organizationId
            this.initTree()
            // 这里需要判断是否选择了人员，没有选择的话需要选择下,拿到人员列表
            if (!this.firstDefineWorkflow.userName || !this.firstDefineWorkflow.userId) {
              this.getTableList(this.firstDefineWorkflow.organizationId)
            }
          }
          if (res.data.lstDefineWorkflow) {
            this.tableData_sp = res.data.lstDefineWorkflow
          }
          if (res.data.addWorkflow) {
            this.addWorkflowObj = res.data.addWorkflow
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
::v-deep .content-box{
  overflow: hidden;
  .left-tree{
    width: 200px;
    float: left;
    max-height:600px;
    overflow-y: auto;
  }
  .right-content{
    width: calc(100% - 210px);
    float: right;
    .top-table-content{
      min-height: 200px;
    }
    // .action-btns{
    //   padding: 10px;
    // }
    .bottom-table-content{
      min-height: 200px;
    }
  }
}
</style>
